import React, { Component } from 'react';
import { Form, Row, Col, Input, Button, message } from 'antd';
import style from './Setting.less';
const FormItem = Form.Item;

class ReportSetting extends Component {

  componentWillReceiveProps(nextProps) {
    this.setState({ reportStatus: nextProps.reportStatus });
  }


  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        if (values.title.length > 90) {
          message.error('标题太长了了了', 3);
          return;
        }
        if (values.content.length > 400) {
          message.error('敢不敢保证详情在400字以内？', 3);
          return;
        }
        // 将换行符替换为br标签以便后端存储
        values.content = values.content ? values.content.replace(/\n|\r\n/g,'<br>') : '';
        this.props.handlePublish(values);
        this.props.form.resetFields();
      } else {
        console.log('err', err);
      }
    });
  }

  render() {
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        span: 12,
        offset: 4,
      },
    };
    const { getFieldDecorator } = this.props.form;
    return(
      <div className={style.setting_wrap}>
        <Row gutter={0}>
          <Col span={14}>
            <Form layout="horizontal" onSubmit={this.handleSubmit}>
              <FormItem
                {...formItemLayout}
                label="标题"
                hasFeedback
              >
                {getFieldDecorator('title', {
                  rules: [{
                    required: true, message: '标题'
                  }],
                })(
                  <Input type="text" />
                )}
              </FormItem>

              <FormItem
                {...formItemLayout}
                label="详情"
                hasFeedback
              >
                {getFieldDecorator('content')(
                  <Input
                    type="textarea" rows={6}
                  />
                )}
              </FormItem>

              <FormItem {...tailFormItemLayout}>
                <Button type="primary" htmlType="submit" size="large">发布公告</Button>
              </FormItem>
            </Form>
          </Col>
        </Row>
      </div>
    );
  }
}

const ReportSettingForm = Form.create()(ReportSetting);

export default ReportSettingForm;